import client from '@lib/client'
import { useClientRequest } from '@lib/utils/useClientRequest'
import { Button, Form, Input, InputNumber, message, Modal } from 'antd'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'

export interface IUpdateInstanceButtonProps {
  refresh: () => void
  instanceId?: number
}

export default function UpdateInstanceButton(
  props: IUpdateInstanceButtonProps
) {
  const { refresh, instanceId } = props

  const { t } = useTranslation()
  const [visible, setVisible] = useState(false)
  const [isPosting, setIsPosting] = useState(false)

  const { data, sendRequest: getInstance } = useClientRequest(
    (reqConfig) =>
      client.getInstance().getInstance(instanceId || -1, reqConfig),
    { immediate: false }
  )

  const instanceData = data ?? {}

  const handleOpen = useCallback(async () => {
    await getInstance()
    setVisible(true)
  }, [])

  const handleClose = useCallback(() => {
    setVisible(false)
    setIsPosting(false)
  }, [])

  const handleFinish = useCallback(async (values) => {
    try {
      setIsPosting(true)
      const r = await client.getInstance().updateInstance({
        id: values.id,
        name: values.name,
        address: values.address,
        username: values.username,
        password: values.password,
        index: values.index,
      })
      if (r.status == 200) {
        message.success('Success')
        setVisible(false)
        refresh()
      }
    } finally {
      setIsPosting(false)
    }
  }, [])

  return (
    <>
      <a onClick={handleOpen}>{t('instance_info.button.update_instance')}</a>
      <Modal
        title={t('instance_info.modal.save_instance.update_title')}
        visible={visible}
        destroyOnClose
        onCancel={handleClose}
        width={600}
        footer={null}
      >
        <Form onFinish={handleFinish} initialValues={instanceData}>
          <Form.Item
            name="id"
            rules={[{ required: true }]}
            label={t('instance_info.modal.save_instance.form.id')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            name="name"
            rules={[{ required: true }]}
            label={t('instance_info.modal.save_instance.form.name')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="address"
            rules={[{ required: true }]}
            label={t('instance_info.modal.save_instance.form.address')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="username"
            rules={[{ required: true }]}
            label={t('instance_info.modal.save_instance.form.username')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="password"
            label={t('instance_info.modal.save_instance.form.password')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="index"
            rules={[{ required: true }]}
            label={t('instance_info.modal.save_instance.form.index')}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
          >
            <InputNumber min={0} max={255} />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 14, offset: 4 }}>
            <Button type="primary" htmlType="submit" loading={isPosting}>
              {t('instance_info.modal.save_instance.submit')}
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
